<script lang="ts" setup>
import {ref} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '../stores/counter'
import {userLogin} from '../request/home/userapi'
import { ElMessage } from 'element-plus'
    const username =ref(null)
    const Store = useStore()
    const password =ref(null)
    const Router = useRouter()
    async function login(){
     const result=await userLogin(username.value,password.value)
     console.log(result);
     
     Store.NowLoginuser=  result.data.result;
        
     if(result.data.code===1){
        ElMessage({
          message: '登入成功',
          type: 'success',
        })

       Router.replace({
         name:'mainBox'
       })
     }
     else if(result.data.code===-1){
   
  
      ElMessage({
          message: result.data.msg,
          type: 'error',
        })
      
      
    
     }
    }
</script>

<template>

 

  <div>
    <img class="img1" src="https://sjtp.api.mofashi.ltd/api.php" alt="">
    <div class="div1">
        <img class="img2" src="biejing.jpg" alt="">
        <div class="div2">
            <span class="span2">用户登入</span>
         
            <span class="span1"><span>账号：</span><input class="input" v-model="username" type="text"></span>
            <span class="span1"><span>密码：</span><input class="input" v-model="password" type="password" name="" id=""></span>
            <span style="width: 80%; display: flex; flex-direction: row-reverse;">
              <input class="botton" type="button" @click="login" value="确定">
            </span>
      
        </div>
    

    </div>
  </div>

</template>

<style scoped>

.img1{
  width: 100%;
  height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 z-index: -1;

}
.div1{
  position: absolute;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 400px;
  width: 600px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(20px);
  box-shadow: 0 0 15px;
  border-radius:20px ;
}
.img2{
  height:100%;
  border-radius:20px 0 0 20px ;
}

.div2{
flex:1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}
.span1{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 80%;
  border:2px solid rgba(0,0,0,0.5);
  border-radius:50px ;
  margin-top:20px ;
}
.input{
  height: 100%;
  width: 70%;
  border:0px ;
  caret-color:auto;
  font-size: 20px;
  font-weight: 600;
  background:rgba(255,255,255,0) ;
   outline:none;
}
.botton{
  border:0 ;
  background: rgba(255,255,255,0);
  margin-top:30px ;
  width: 120px;
  font-size: 15px;
  font-weight: 900;
  height: 40px;
  border: 2px solid rgba(0,0,0,0.5) ;
  border-radius:20px;

}
.botton:active{
  border:0 ;
  background: rgba(255,255,255);
  margin-top:30px ;
  width: 120px;
  height: 40px;
  border: 2px solid rgba(0,0,0,0.5) ;
  border-radius:20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
    
}
.span2{
  font-size: 25px;
  font-weight: 900;
  margin-bottom:20px ;
}
.span1 span{
  font-size: 20px;
  font-weight: 600;
}

</style>

